<template>
  <div id='app'>
      <van-nav-bar
  title="分类"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"

/>


<van-tabs v-model="active" @change="change">
  <van-tab v-for="(c,i) in list"  :key="i" :title="c.name" :name="c.id">
      <p class="wz">{{c.name}}</p>
      <p class="wz">{{c.front_name}}</p>
  </van-tab>
</van-tabs>

<ul class="uu">
    <li v-for="(c,i) in ship" :key="i" @click="xq(c.id)">
        <img v-lazy="c.list_pic_url" alt="">
        <p>{{c.name}}</p>
        <p class="pricd">￥{{c.retail_price}}元</p>
    </li>
</ul>


<van-loading color="#0094ff" v-show="show" class="ll"/>

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      show:true,
      active:1005000,
      ship:[]
    }
  },
  methods: {
      get(){
          this.$axios(`http://shop.bufantec.com/bufan/category/categoryNav?id=${this.$route.query.id}`,'get').then(res=>{
              this.list=res.data.navData
              
          })
      },
      onClickLeft(){
          this.$router.go(-1)

      },
      change(){
           this.$axios(`http://shop.bufantec.com/bufan/goods/goodsList?categoryId=${this.active}`,'get').then(res=>{
               console.log(res.data.data);
               this.ship=res.data.data
              
             this.show=false
          })
      },
      xq(d){
          this.$router.push({path:'/xq',query:{d}})
   
      }

  },
  mounted() {
      this.get()
      this.change()

  },
  components: {

  }
}
</script>

<style lang='scss'>
.pricd{
    color: red;
    margin-top: 10px;
}
.uu{
    display: flex;
    flex-wrap: wrap;
    li{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 300px;
        border: 1px solid gainsboro;
        img{
            width: 90%;
            height: auto;
        }
    }
}
.wz{
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
.ll{
position: fixed;
  left: 50%;
  top: 50%;
  transition: -50% -50%;
}

</style>
